<template>
  <div class="cartContainer">
    <van-checkbox v-for="item in list" :key="item.id" v-model="item.selected" class="checkbox">
      <van-card :origin-price="item.goods.originPrice" :price="item.goods.price" :desc="item.goods.text" :title="item.goods.name" :thumb="item.goods.image">
        <template #tags>
          <van-tag class="tag" color="#754dec" text-color="#fff">酒水</van-tag>
        </template>
        <template #num>
          <van-stepper v-model="item.count" :min="1" :max="99" integer disable-input @click.stop />
        </template>
      </van-card>
    </van-checkbox>
    <van-submit-bar :price="fee" button-text="提交订单" @submit="createOrder">
      <van-checkbox v-model="allChecked">全选</van-checkbox>
      <template #tip>
        <div class="tip">
          <span v-if="station">提货地址：{{ station?.name }}</span>
          <span v-else>请设置自提点</span>
          <span class="button" @click="changeStation">{{station ? '更改自提点' : '设置自提点'}}</span>
        </div>
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import { showDialog } from 'vant';
import { mapState } from 'vuex';
import _ from 'lodash';
export default {
  data() {
    return {
      list: [],
    }
  },
  computed: {
    allChecked: {
      get() {
        return _.every(this.list, o => o.selected); // 每一个都选中就是全选
      },
      set(value) {
        _.forEach(this.list, o => { o.selected = value });
      },
    },
    fee() {
      return _.sumBy(this.list.filter(o => o.selected), o => o.goods.price * o.count) * 100;
    },
    ...mapState(['station']),
  },
  created() {
    this.getList();
    app.$bus.on('/cart/refreshList', this.getList);
  },
  methods: {
    async getList() {
      const data = await post('/list/cart', { pageNo: 0, pageSize: 100 });
      if (data.success) {
        this.list = data.result.list;
      }
    },
    // 修改地址
    changeStation() {
      this.$router.push({ path: '/station', query: { stationId: this.station?.id } });
    },
    async createOrder() {
      if (!this.station) {
        return showDialog({ message: '请先选择自提点' });
      }
      const list = this.list.filter(o => o.selected).map(o => ({ goodsId: o.goodsId, count: o.count }));
      if (!list.length) {
        return showDialog({ message: '请先选择商品' });
      }
      const params = {
        stationId: this.station.id,
        fee: this.fee / 100,
        list,
      };
      const data = await post('/create/order', params);
      if (!data.success) {
        return showDialog({ message: data.message });
      }
      app.$bus.emit('/order/refreshList');
      showDialog({ message: '创建订单成功' });
    },
  }
}
</script>

<style scoped lang="less">
.cartContainer {
  width: 375px;
  padding-bottom: 200px;
  overflow-x: hidden;
  :global(.van-submit-bar) {
    bottom: 57px !important;
    border-bottom: 1px solid #d3d3d3;
  }
}
.tag {
  padding: 2px 6px;
  border-radius: 4px;
  margin: 0 4px;
  color: #754dec;
}
.checkbox {
  padding-left: 10px;
}
.tip {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.button {
  color: blue;
}
</style>
